<if condition="$lists neq false">


<div class="row">
<div class="col-md-12">
<div class="articles-slide clearfix">
    <div class="swiper-container">
        <div class="swiper-wrapper">
        <volist name="lists" id="data">
            <div class="swiper-slide">
                 <a title="{$data.title|text}" href="{:U('Articles/index/detail',array('id'=>$data['id']))}">
                    <img alt="{$data.title|text}" src="{$data.cover|getThumbImageById=753,304}" class="img-responsive">
                </a>
                <div class="title">
                    <h3 class="">
                        <a title="{$data.title|text}" href="{:U('Articles/index/detail',array('id'=>$data['id']))}">{$data.title}</a>
                    </h3>
                </div>
            </div>
        </volist>
        </div>

        
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <script>
    $(function(){
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            speed:300,
              autoplay : {
                delay:3000
              },
            
            // 如果需要分页器
            //pagination: {
            //  el: '.swiper-pagination',
            //},
            
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            
            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })  
    })             
    </script>
</div>
</div>
</div>
</if>
